<!-- 首页 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="false"><block slot="content">私信</block></cu-custom>
		<mescroll-uni ref="mescrollMessageRef" height="100%" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<!-- <view :style="{paddingTop: CustomBar + 'px'}"></view> -->
			<view class="msg-list">
				<view class="msg-item" @click="toWeb" >
					<image src="../../static/xiaoxi.png"></image>
					<view class="msg-right border-bottom">
						<view class="user-info">
							<view class="redname">系统通知</view>
							<view class="time">刚刚</view>
						</view>
						<view class="text">暂无消息</view>
					</view>
				</view>
				<view v-for="(item, index) in dataList" :key="index" class="msg-item">
					<u-avatar @click="userCenter(item)" size="90" :src="item.avatar"></u-avatar>
					<view class="read-status" v-if="item.online">
						<view class="read-dot"></view>
					</view>
					<view class="msg-right border-bottom" @click="sendPlay(item)">
						<view class="user-info">
							<view class="nickname">{{item.nickName}}</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="msg-info">
							<view class="msg-box">
								{{item.content}}
							</view>
							<view class="un-read" v-if="item.unRead">
								{{item.unRead}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		
		<user-auth></user-auth>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		
	},
	props:{
		
	},
	data() {
		return {
			CustomBar: this.CustomBar, 
			upOption:{
				auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 20 // 每页数据的数量
				},
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty:{
			        icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~', // 提示
					// btnText: '去看看'
				},
				toTop: {
					right: 40,
					width: 80,
					bottom: 200,
				},
				bgColor: '#FFF',
				textColor: '#606266',
			    textNoMore:'没有更多了'
			},
			dataList: []
		};
	},
	created() {
		uni.$on('indexmsg',this.query);
	},
	destroyed() {
		// 注销全局配置监听
		uni.$off('indexmsg');
	},
	methods: {
		query(e) {
			this.mescroll.resetUpScroll();
		},
		downCallback(mescroll) {
			mescroll.endSuccess();
			mescroll.resetUpScroll();
		},
		async upCallback(mescroll) {
			this.$u.get('/im/roomUser/getList',{
				pageNum: mescroll.num,
				pageSize: mescroll.size,
			}).then(res => {
				mescroll.endSuccess(res.rows.length);
				if (mescroll.num == 1) {
					this.dataList = res.rows;
				} else {
					this.dataList = this.dataList.concat(res.rows);
				}
			}).catch(err => {
				mescroll.endErr();
			});
		},
		toWeb() {
			/* uni.navigateTo({
				url:'/pages/index/web'
			}); */
		},
		zhaohu(e) {
			this.$u.route({
				url: 'packgeMine/pages/chat/chat',
				params: {
					roomId: e.roomId,
				}
			});
		},
		sendPlay(e) {
			var _this = this;
			_this.zhaohu(e);
			_this.$u.get('/system/user/getTmplId',{
				appId : _this.website.appId
			}).then(res => {
				var tmplIds = res.tmplIds
				var tmplId = tmplIds[0];
				wx.getSetting({
				  withSubscriptions: true,
				  success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
					  if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
						let item = res.subscriptionsSetting.itemSettings[tmplId]
						if (item == "reject") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请打开通知管理里面的消息提醒',
						  	showCancel: false,
						  	success: function(res) {
						  		uni.openSetting({
								  success(res) {
									console.log(res.authSetting)
								  },
								  fail(err) {
									console.error(err);
								  }
								});
						  	}
						  });
						} else if (item == "accept") {
						  uni.requestSubscribeMessage({
						  	//数组，最多放三个订阅模板的ID
						  	tmplIds: tmplIds,
						  	success: function(res) {
						  		var code = res[tmplIds[0]];
						  		if('reject' == code){
						  			_this.$u.toast('请点击允许订阅消息');
						  		}else{
									//_this.zhaohu(e);
									return;
						  		}
						  	},
						  	fail: function(res) {
						  		console.log(res)
						  	},
						  	complete: (res) => {
						  		
						  	}
						  });
						} else if (item == "ban") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请在设置打开订阅消息开关',
						  	showCancel: false,
						  	success: function(res) {
						  		
						  	}
						  });
						}
					  }else{
						uni.requestSubscribeMessage({
							//数组，最多放三个订阅模板的ID
							tmplIds: tmplIds,
							success: function(res) {
								var code = res[tmplIds[0]];
								if('reject' == code){
									_this.$u.toast('请点击允许订阅消息');
								}else{
									//_this.zhaohu(e);
									return;
								}
							},
							fail: function(res) {
								console.log(res)
							},
							complete: (res) => {
								
							}
						});
					  }
					} else {
					  uni.showModal({
					  	title: '温馨提示',
					  	content: '请在设置打开通知管理开关',
					  	showCancel: false,
					  	success: function(res) {
					  		uni.openSetting({
							  success(res) {
								console.log(res.authSetting)
							  },
							  fail(err) {
								console.error(err);
							  }
							});
					  	}
					  });
					}
				  }
				});
				
			})
		},
		userCenter(item) {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'packgeMine/pages/center/index',
					params: {
						userId: item.userId,
					}
				});
			});
		},
		
	}
}; 
</script>
<style lang="scss" scoped>
	.msg-item {
		display: flex;
		align-items: center;
		padding: 0 15px;
		padding-bottom: 0;
	}
	.msg-right {
		flex: 1;
		padding: 15px 0;
		margin-left: 15px;
	}
	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5px;
	}
	.redname {
		font-size: 28rpx;
		color: #e39e9e;
	}
	.nickname {
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	.time {
		font-size: 28rpx;
		color: #b5b5b5;
		line-height: 28rpx;
	}
	.text {
		font-size: 28rpx;
		color: #b5b5b5;
		line-height: 28rpx;
	}
	.msg-text {
		font-size: 20rpx;
		color: #fff;
		background-color: #decdcd;
		padding: 3px 8px;
		border-radius: 20px;
	}
	.read {
		background-color: #a2d0fd;
	}
	.info {
		background-color: #7bf61f;
	}
	.status-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.msg-item image{
		width: 90rpx;
		height: 90rpx;
	}
	.msg-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.msg-box {
		font-size: 28rpx;
		color: #b5b5b5;
		min-height: 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	
	.border-bottom {
		position: relative;
	}
	.border-bottom:before {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-bottom: 1rpx solid #f4f4f5;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
	}
	
	.un-read {
		background-color: red;
		font-size: 20rpx;
		color: #fff;
		border-radius: 100%;
		padding: 6rpx;
		line-height: 20rpx;
	}
	
	.read-status {
		position: relative;
		height: 90rpx;
	}
	.read-dot {
		position: absolute;
		bottom: 3px;
		left: -26rpx;
		background-color: #f06c7a;
		width: 28rpx;
		height: 28rpx;
		border-radius: 100%;
		border: 6rpx solid #fff;
	}
	
	.loadmore-box{
		padding: 15px;
		padding-bottom: 140rpx;
	}
</style>
